<template>
    <el-card class="top-card top-card-blue">
        <span>总销量</span>
        <p>
            <span>￥15,556.00</span>
        </p>
        <div class="right-icon">
            <el-icon style="top: 20%;">
                <ts-icon-money />
            </el-icon>
        </div>
        <div class="bottom">
            自上周以来
            <el-icon class="ri-arrow-up-line ri">
                <ts-icon-up />
            </el-icon>
            <span>10%</span>
        </div>
    </el-card>
</template>
<script setup>
</script>
<style lang="less" scoped>
.top-card {
	position: relative;
	height: 168px !important;
	font-size: 14px;
}

.top-card p {
	font-size: 28px;
	margin: 28px 0px 28px 0px;
}

.top-card .right-icon {
	position: absolute;
	top: 50%;
	right: 20px;
	width: 60px;
	height: 60px;
	line-height: 60px;
	color: var(--el-color-primary);
	text-align: center;
	background: var(--el-color-primary-light-9);
	border-radius: 50%;
	transform: translateY(-50%)
}

.top-card .right-icon i {
	font-size: 35px
}

.top-card .bottom .ri-arrow-up-line {
	width: 18px;
	height: 18px;
	margin: 0 3px 0 2px;
	color: var(--el-color-success);
	vertical-align: -3.5px !important;
	background: var(--el-color-success-light);
	border-radius: 50%;
	transform: scale(.8)
}

.top-card .bottom span {
	color: var(--el-color-success)
}

.top-card-blue {
	color: #fff;
	background: var(--el-color-primary);
	background: linear-gradient(90deg, var(--el-color-primary-light-4), var(--el-color-primary))
}

.top-card-white {
	background: #fff;
}

.top-card-blue .bottom .ri-arrow-up-line {
	color: var(--el-color-primary);
	background: transparent;
	background: var(--el-color-primary-light-9);
	transform: scale(.8)
}

.top-card-blue .bottom span {
	color: #fff
}

.ri {
	display: inline-block;
	font-size: 16px;
	text-align: center;
	vertical-align: -3.5px;
}
</style>
